<template>
  <div class="header">
      <div class="header-title">
        <el-breadcrumb  separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in titleList" :key="index">{{item.title}}</el-breadcrumb-item><!--  :to="item.path" -->
        </el-breadcrumb>
      </div>
      <div class="header-button" v-if="!hideButton">
        <el-link type="primary" v-if="hrefShow" @click="hrefClick()" style="padding:0 10px 0 10px">{{hrefName}}</el-link>
        <el-button type="primary" size='small' @click="handelClick()"><i :class="icon"></i> {{btnTitle}}</el-button>
        <el-button type="primary" v-if="exportShow" size='small' @click="handelExport()">{{btnExport}}</el-button>
      </div>
    </div>
</template>

<script>

export default {
  name: 'HeaderTitle',
  props: {
    // title: {
    //   type: String,
    //   required: true
    // },
    titleList: {
      type: Array,
      required: true
    },
    hideButton:{
      type:Boolean,
      default:true,
      required:false,
    },
    exportShow: {
      type:Boolean,
      required:false,
    },
    hrefShow:{
      type:Boolean,
      required:false,
    },
    hrefName:{
      type: String,
      required: false
    },
    btnTitle: {
      type: String,
      required: false
    },
    btnExport: {
      type: String,
      required: false
    },
    icon: {
      type: String,
      required: false
    }
  },
  watch: {
    titleList: {
      handler(newVal, oldVal) {
        for(let i = 0; i < newVal.length; i++) {
          if(oldVal[i] != newVal[i]){
            console.log(newVal)
          }
        }
      },
      deep: true
    }
  },
  methods: {
    handelClick(){
      this.$emit('handelClick')
    },
    handelExport() {
      this.$emit('handelExport')
    },
    hrefClick(){
      this.$emit('hrefClick')
    }

  }
}
</script>

<style lang="scss" scoped>

  .header{
    height: 52px;
    padding: 10px 30px;
    font-size: 16px;
    color: #333;
    box-shadow: 1px 0 4px #CCC;
    .header-title {
      float: left;
      margin-top: 10px;
      line-height: 32px;
    }
    .header-button{
      float:right;
      vertical-align: middle;
    }
  }
</style>
